<template>
  <div>
    <div class="loginbody">
      <img class="background" src="../assets/BK_login2.png">
      <div class="headerTopStyle1">
        <img src="../assets/top_wenzi.png" height="90%" width="auto">
      </div>
      <div class="headerTopStyle2"></div>
      <div class="headerTopStyle">
        <div class="headerTopStyle3">
        </div>
        <div class="headerTopStyle4">
        </div>
        <div class="headerTopStyle5">
        </div>
        <div class="headerTopStyle6">
        </div>
        <div class="headerTopStyle7">
        </div>
      </div>
      <br>
      <div class="headerstyle">
        <h1>抽水蓄能电站主进水阀设备在线监测与状态评估系统</h1>
      </div>
      <br> <br>
      <div class=" loginbox">
        <div class="col-md-12 col-sm-12 col-xs-12 ">
          <div class="col-md-4 col-sm-4 col-xs-4 littleball1">
            <div class="ball1"></div>
            <div class="ball2"></div>
            <div class="ball3"></div>
            <div class="ball4"></div>
            <div class="ball5"></div>
            <div class="ball6"></div>
            <div class="ball7"></div>
          </div>
          <div class="col-md-4 col-sm-4 col-xs-4">
            <div class="transparent-login">
              <form role="form" class="fromstyle" autocomplete="off">
                <div class="col-md-12 col-sm-12 col-xs-12">
                  <label style="margin-top: 8px" >用户名:</label>
                  <div class="text ">
                    <input type="text" class=" form-control inputstyle" v-model="loginForm.username" placeholder="username"
                           required>
                  </div>
                </div>
                <div class="col-md-12 col-sm-12 col-xs-12">
                  <label style="margin-top: 8px">密&nbsp;&nbsp;&nbsp;&nbsp;码:</label>
                  <div class="form-group text1">
                    <input type="password" class="form-control inputstyle" v-model="loginForm.password"
                           placeholder="password" required>
                  </div>
                </div>
                <div class="checkstyle">
                  <label class="slideOne">
                    <input type="checkbox" id="slideOne" v-model="remember" @click="autoRemenber()">
                    <label for="slideOne"></label>
                  </label><label
                  style="top:-3px;font-size:10px;color: rgba(0,0,0,0.3);margin-left: 10px;">记住密码</label>
                </div>
                <div v-if="showError" class="alert alertstyle" role="alert">
                  <label @click="showError=false" type="button" class="close" data-dismiss="alert"
                         aria-hidden="true">
                    &times;
                  </label>
                  用户名或密码错误！请更改。
                </div>
                <div class="form-group ">
                  <button class=" form-control loginbutton"
                          @click="login()">登&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;录
                  </button>
                </div>
              </form>
            </div>
          </div>
          <div class="col-md-4 col-sm-4 col-xs-4 littleball2">
            <div class="ball11"></div>
            <div class="ball12"></div>
            <div class="ball13"></div>
            <div class="ball14"></div>
            <div class="ball15"></div>
            <div class="ball16"></div>
            <div class="ball17"></div>
          </div>
        </div>
      </div>
      <div class=" login_foot2">
      </div>
      <div class=" login_foot1"><span>Copyright ©华中科技大学 江西洪屏抽水蓄能有限公司</span></div>
    </div>
    <div class="login_foot">
      <div class=" login_foot3">
      </div>
      <div class=" login_foot4">
      </div>
      <div class=" login_foot5">
      </div>
      <div class=" login_foot6">
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      loginForm: {
        username: '',
        password: ''
      },
      remember: false,
      isLogin: false,
      showError: false
    }
  },
  methods: {
    autoRemenber () {
      this.remember = !this.remember
      if (this.remember === true) {
        this.loginForm.username = 'admin'
        this.loginForm.password = '123456'
      }
    },
    login () {
      //let _this = this
      if (this.loginForm.username === '' || this.loginForm.password === '') {
        alert('账号或密码不能为空')
      } else {
        if (this.loginForm.username === 'admin' && this.loginForm.password === '123456') {
          this.isLogin = true
          this.$router.push('/nav/welcome')
        } else {
          this.showError = true
        }
        //token验证,与后端一起
//        this.axios({
//          method: 'post',
//          url: '/user/login',
//          data: _this.loginForm
//        }).then(res => {
//          console.log(res.data)
//          _this.userToken = 'Bearer ' + res.data.data.body.token
//          // 将用户token保存到vuex中
//          _this.changeLogin({ Authorization: _this.userToken })
//          _this.$router.push('/nav/welcome')
//          alert('登陆成功')
//        }).catch(error => {
//          alert('账号或密码错误')
//          console.log(error)
//        })
      }
    }
  }
}
</script>
